<template>
	<div class="gj-container">
		<div class="phonelistWrap">
			<div class="phonelist-content">
				<div>故障输入</div>
				<div class="tableBox hitch">
					<el-table :data="tableData" max-height="660px">
						<el-table-column type="index" width="80" align="center">
							<template slot-scope="scope">
								<div @click="createRow" v-if="scope.$index == tableData.length - 1"><img src="@/assets/img/add.png" /></div>
								<div @click="delRow(scope.$index, scope.row)" v-else><img src="@/assets/img/plus.png" /></div>
							</template>
						</el-table-column>
						<el-table-column type="index" label="序号" align="center" width="80" show-overflow-tooltip></el-table-column>
						<el-table-column prop="time" label="PLC故障" align="center" width="200" show-overflow-tooltip>
							<template slot-scope="scope">
								<div class="rework"><el-input v-model="scope.row.errorName" placeholder="请输入故障"></el-input></div>
							</template>
						</el-table-column>
						<el-table-column prop="errorName" label="触发时间" align="center" min-width="200">
							<template slot-scope="scope">
								<div class="rework"><el-date-picker v-model="scope.row.time" type="datetime" placeholder="选择时间" format="dd日 HH时"></el-date-picker></div>
							</template>
						</el-table-column>
						<el-table-column prop="logName" label="类型" align="center" min-width="200">
							<template slot-scope="scope">
								<div class="rework" @click="currentChange">
									<el-input v-model="scope.row.errorName" placeholder="请选择类型" ></el-input>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="timelength" label="时长(分钟)" align="center" min-width="200">
							<template slot-scope="scope">
								<div class="rework"><el-input v-model="scope.row.timelength" placeholder="请选择时间"></el-input></div>
							</template>
						</el-table-column>
						<el-table-column prop="remarks" label="备注" align="center" min-width="200">
							<template slot-scope="scope">
								<div class="rework"><el-input v-model="scope.row.remarks" placeholder="请输入备注"></el-input></div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div style="float:right;margin-top:50px;"><el-button type="primary">确认</el-button></div>
			</div>
		</div>
		<el-dialog
		  title="故障选择"
		  :visible.sync="dialogVisible"
		  width="65%"
		  :before-close="handleClose"
			class="orderSheet">
		  <div class="orderSheetBody">
				<el-input placeholder="请输入搜索内容" style="width:400px;" prefix-icon="el-icon-search" v-model="searchContent"></el-input>
				<div class="cardBrandy">
					<el-row :gutter="15">
						<el-col class="box-col" :span="4" v-for="item in data">
							<el-card class="box-card">
							  <div class="title">
							    {{item}}
							  </div>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dialogVisible:false,
			searchContent: '',
			value1: '',
			value: '',
			form: {
				name: ''
			},
			options: [
				{
					value: '选项1',
					label: '黄金糕'
				},
				{
					value: '选项2',
					label: '双皮奶'
				},
				{
					value: '选项3',
					label: '蚵仔煎'
				},
				{
					value: '选项4',
					label: '龙须面'
				},
				{
					value: '选项5',
					label: '北京烤鸭'
				}
			],
			tableData: [
				{
					id: '1',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '2',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '2',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '4',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '5',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				}
			],
			data:['Z-1 SAP纸','Z-2 中央吸收 纸','Z-3 表面材无 纺布','Z-4 第二层无 纺布','Z-5 两侧无纺 布','Z-6 B.S纸','Z-1 SAP纸']
		};
	},
	methods: {
		onSubmit() {
			console.log('submit!');
		},
		currentChange (row, column, event) {
			this.dialogVisible = true;
		},
		handleClose(){
			this.dialogVisible = false;
		},
		createRow() {
			var list = {
				id: '',
				time: '',
				timelength: '',
				errorName: '',
				logName: '',
				remarks: ''
			};
			this.tableData.push(list);
		},
		delRow(val, row) {
			this.tableData.splice(val, 1);
		}
	}
};
</script>

<style scoped>
.tableBox {
	border-radius: 10px;
	margin-top: 30px;
	background: #fff;
	padding: 30px;
	height: 730px;
}
.remantRework >>> .el-form-item {
	border-bottom: solid 1px #eeeeee;
	padding-bottom: 30px;
	padding-top: 20px;
}
.remantRework >>> .el-form-item__label {
	font-size: 24px;
	color: #000;
}
.remantRework >>> .el-form-item__content {
	font-size: 24px;
	color: #666666;
}
.remantRework >>> .el-input > input {
	background: #fff;
	font-size: 24px;
	color: #666666;
}
.orderSheet >>> .el-dialog__title {
	font-size: 22px;
	color: #666666;
}
.orderSheet >>> .el-dialog__headerbtn {
	font-size: 26px;
	color: #888888;
}
.cardBrandy {
	margin-top: 20px;
}
.box-col {
	margin-top: 20px;
}
.box-card {
	border-radius: 10px;
}
.box-card .title {
	font-size: 26px;
	text-align: center;
	height: 80px;
	display: table-cell;
	vertical-align: middle;
}
.rework >>> .el-input > input {
	background: #fff;
}
.tableBox >>> .el-table th.el-table__cell > .cell {
	text-align: center;
}
.hitch >>> .el-input--large .el-input__inner {
	padding-left: 30px !important;
}
.hitch >>> .el-input__prefix {
	display: none;
}
.hitch >>> input::-webkit-input-placeholder {
	color: #c3c3c3;
}
.hitch >>> input::-moz-input-placeholder {
	color: #c3c3c3;
}
.hitch >>> input::-ms-input-placeholder {
	color: #c3c3c3;
}
</style>
